'use client';
import React, { useEffect, useState } from 'react';
import { Table, Button } from 'antd';
import { scanResultApi } from '@/services/scanResultApi';
import { ReloadOutlined } from '@ant-design/icons';

const scanColumns = [
  { title: 'IP地址', dataIndex: 'IP', key: 'IP' },
  { title: '端口号', dataIndex: 'Port', key: 'Port' },
  { title: '端口状态', dataIndex: 'PortStatus', key: 'PortStatus', render: (status: string) => status?.trim().toLowerCase() === 'open' ? '开放' : '关闭' },
  { title: '服务', dataIndex: 'Service', key: 'Service' },
  { title: '扫描时间', dataIndex: 'CreateTime', key: 'CreateTime', render: (t: string) => new Date(t).toLocaleString() },
];

function ProjectScanList({ projectId }: { projectId: string }) {
  const [data, setData] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const PAGE_SIZE = 20;

  const fetchData = async (pageNum = page) => {
    setLoading(true);
    try {
      const res = await scanResultApi.getScanResultsByProject(Number(projectId), { page: pageNum, page_size: PAGE_SIZE });
      setData(res.data?.Data || []);
      setTotal(res.data?.TotalCount || 0);
    } catch {
      // 可加错误提示
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData(1);

  }, [projectId]);

  const handleTableChange = (pagination: any) => {
    setPage(pagination.current);
    fetchData(pagination.current);
  };

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginBottom: 16 }}>
        <Button
          type="text"
          icon={<ReloadOutlined />}
          onClick={() => fetchData(page)}
          loading={loading}
          aria-label="刷新"
        />
      </div>
      <Table
        rowKey="ID"
        columns={scanColumns}
        dataSource={data}
        loading={loading}
        pagination={{ current: page, pageSize: PAGE_SIZE, total, showSizeChanger: false }}
        onChange={handleTableChange}
      />
    </div>
  );
}

export default ProjectScanList; 